<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见选择器</title>
<!--1.标签选择器    <style>-->
<!--        p{-->
<!--            color:red;-->
<!--        }-->
<!--    </style>-->
    <style>
        #p2{
            font-family: 楷体;
        }
        .color{
            color: red;
        }
        .hbase1{
            color: pink;
        }
        .hbase2{
            font-family: 楷体;
        }
        /*子元素*/
        #u1>p{
            color: green;

        }
        /*后代选择器*/
        #u1 p{
            color: green;
        }

    </style>
</head>
<body>
<!--通过选择器语法，选中目标节点，实现样式修改-->
<!--css选择器
1.标签选择器 群组选择器 h1,h2     五星级
2.id选择器 id必须是唯一的         五星级
3.class选择器 可以拥有多个class   五星级
4.子元素选择器 只有儿子受影响 孙子不受影响
5.后代选择器

-->
<h3>三级标题</h3>
<h2>二级标题</h2>
<p class="color">background-image 属性描述了元素的背景图像.</p>
<p id="p2" class="color">默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.</p>
<P class="color">页面背景图片设置实例:</P>
<h1 class="hbase1">一级标题</h1>
<h2 class="hbase1">二级标题</h2>
<h3 class="hbase1">三级标题</h3>
<h4 class="hbase1 hbase2">四级标题</h4>
<h5 class="hbase1 hbase2">五级标题</h5>
<h6 class="hbase1 hbase2">六级标题</h6>

<ul class="u1"id="u1">
    <p>p1</p>
    <li>1
        <p>1-1</p>
    </li>
    <p>p2</p>
    <li>2
        <p>2-2</p>
    </li>
    <p>p3</p>
    <li>3
        <p>3-3</p>
    </li>
</ul>
<ul class="u2"id="u2">
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

</body>
</html>
